<template>
	<!-- 抢答电脑端  命名错误 -->
	<div class="sing-in-div">
		<div class="sing-in-div-body">
			<div class="sing-in">
				<div class="sing-in-img">
					<img :src='nosignin' alt="未抢到">
				</div>
				<div class="sing-in-message">
					<h5>已获得抢答名额的同学如下</h5>
					<div class="students-list-container">
					<p class="students-list">
						<span v-for="(student, index) in students" :key="index">{{ student }}</span>
					</p>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>ls

<script setup>
	import nosignin from '../../static/noSingIn.png';
	import {
		ref,
		onMounted
	} from 'vue';
	const students = ref([
		'张三', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'zhangsan','ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'ls', 'zhangsan'
	]);
	
	onMounted(() => {
		console.log("uihguujhuijfd");
		const scrollContainer = document.querySelector('.students-list-container');
		
		scrollContainer.addEventListener('wheel', (event) => {
			event.preventDefault(); // 阻止默认的滚动行为
			// console.log("1222454");
			const delta = event.deltaY > 0 ? 1 : -1; // 检测滚动方向
			const currentScrollTop = scrollContainer.scrollTop;

			// 计算新的滚动位置
			const newScrollTop = currentScrollTop + (delta * 40); // 40 是每次滚动的距离

			// 更新滚动位置
			scrollContainer.scrollTo({
				top: newScrollTop,
				behavior: 'smooth' // 平滑滚动
			});
		});
	});
</script>

<style scoped>
	.sing-in-div {
		background-color: transparent;
		width: 100vw;
		/* 设置一个固定的宽度 */
		height: 100vh;
		/* 设置一个固定的高度 */
		position: fixed;
		/* 固定位置 */
		top: 50%;
		/* 定位到屏幕中间 */
		left: 50%;
		/* 定位到屏幕中间 */
		transform: translate(-50%, -50%);
		/* 精确居中 */
		display: flex;
		justify-content: center;
		align-items: center;
		/* overflow: hidden; 防止内容溢出 */
		z-index: 1000;
		/* 确保它在其他内容之上 */
	}

	.sing-in-div-body {
		background-color: beige;
		width: 100%;
		/* 占据父容器的 90% */
		height: 90%;
		/* 占据父容器的 90% */
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 8px;
	}

	.sing-in {
		position: relative;
		background-color: white;
		width: 660px;
		height: 360px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		/* 可选：添加阴影效果 */
		border-radius: 8px;
		/* 可选：添加圆角 */
	}

	.sing-in-img {
		position: absolute;
		top: -120px;
		/* background-color: aqua; */

	}

	.sing-in-img img {
		display: inline-block;
		width: 200px;
		height: auto;
		/* 自动调整高度以保持比例 */
		object-fit: cover;
		/* 或者 contain, 根据需要选择 */
	}

	.sing-in-message {
		position: absolute;
		top: 70px;
		text-align: center;

	}

	.sing-in-message h5 {
		font-size: 24px;
		margin-bottom: 1rem;
		/* 设置 h5 和 p 之间的间距 */
	}

	
	.students-list-container {
		width: 330px;
		height: 190px; /* 固定高度 */
		overflow: hidden; /* 隐藏溢出的内容 */
		position: relative;
		}


	.students-list {
		display: flex;
		flex-wrap: wrap;
		/* 允许 span 标签换行 */
		justify-content: center;
		/* 水平居中 span 标签 */
		gap: 0.5rem;
		/* 设置 span 标签之间的间隔 */
	}

	.students-list span {
		background-color: #f0f0f0;
		/* 给 span 添加背景色以便于观察 */
		padding: 0.5rem;
		/* 设置内边距 */
		border-radius: 4px;
		/* 圆角 */
		flex: 0 0 auto;
		/* 确保 span 的大小不会改变 */
		width: 6rem;
		/* 固定宽度 */
		height: 2rem;
		/* 固定高度 */
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		/* 确保 padding 不会增加元素的实际尺寸 */
	}

</style>